<template>
    <el-dialog title="新建待办" modal-class="add-folder-modal" @closed="handlerCancel" model-value="true" width="900px" center append-to-body>
        <el-form v-model="form" label-width="120px">
          <el-form-item label="待办">
            <SummerNote :height="300" v-model="form.remark" v-if="editable" />
            <div v-else v-html="form.remark"></div>
          </el-form-item>
          <el-form-item label="待办截止日期" v-if="editable">
            <el-date-picker value-format="YYYY-MM-DD" style="width: 100%;" v-model="form.nextTime" type="date" />
          </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button size="small" @click="handlerCancel">取消</el-button>
            <el-button v-if="editable" size="small" type="primary" @click="handlerSave">
                保存
            </el-button>
            </div>
        </template>
    </el-dialog>
  </template>
    
  <script lang="ts" setup>
  import { defineProps, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import api from '/@/api/email/index';
  import SummerNote from '/@/components/summerNote/index.vue';

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    editable: {
      type: Boolean,
      default: true
    }
  });

  const form = ref(props.data);
  
  const emit = defineEmits(['close']);

  const handlerCancel = () => {
    emit('close');
  };
  
  const handlerSave = async () => {
    const saveFun = form.value.id ? api.inquiry.editPlan : api.inquiry.addPlan;
    const res = await saveFun(form.value);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      emit('close', form.value);
    }
  };
  
  </script>
  <style lang="scss" scoped>
  </style>
    